<template>
  <div class="floor-group-container">
    <div v-if="floorList.length > 0">
      <floor-item v-for="(item,index) in floorList" :floor="item" :key="index"></floor-item> 
    </div>
    <div class="no-circle-box" v-if="floorList.length < 1">
        <img src="../../../assets/img/no-data-show.png" alt="">
        <p>暂无数据</p>
    </div>
  </div>
</template>

<script>
  import market from '@/api/market.js'
  import floorItem from './floor.vue'
  export default {
    name: 'floor-group',
    components: {
      floorItem
    },
    data () {
      return {
        floorList: [],
        pageNum: 1,
        haveAll: true
      }
    },
    created () {
      this.getCourseList()
      window.onscroll = function () {
          var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
          var scrollH = document.documentElement.scrollHeight || document.body.scrollHeight;
          var clientH = document.documentElement.clientHeight || document.body.clientHeight; 
          if (scrollT >= scrollH - clientH && this.haveAll) {
              this.pageNum++
              this.getCourseList()
          }
      }.bind(this)
    },
    methods: {
      getCourseList () {
        market.getCourseList({
          mid: this.$route.query.mid,
          orderBy: 1,
          page: this.pageNum,
          pagesize: 10,
          isFree: 1
        }).then(res => {
          if (res.code == 0) {
            if (res.result) {
              this.floorList = this.floorList.concat(res.result)
            } else {
              this.haveAll = false
            }
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .floor-group-container {
    background-color: #efefef;    
  }
  .no-circle-box {
        text-align: center;
        font-size: 0;
        background: #fff;
        img {
            width: 3.43rem;
            margin-top: 1.2rem;
        }
        p {
            color: #282828;
            font-size: 0.3rem;
            margin-top: 0.7rem;
        }
    }
</style>